<template>
	<div ref="mgrDialog" class="dialog-wrap">
		
		<el-dialog 
			title="会员信息" 
			width="40%"
			@close="resetDialog" 
			:visible.sync="DialogVisible"
		>
			
			<el-row :gutter="20">

				<el-form 
					v-if="form !== {}"
					ref="dialogForm"
					:rules="rules"
					size="mini"
					:label-width="formLabelWidth"
					:model.sync="form">
					
					<el-form-item label="姓名">
                        <el-input v-model="editForm.name" style="width: 300px;"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="用户名">
                        <el-input disabled v-model="editForm.account" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号码">
                        <el-input disabled v-model="editForm.phone" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="生日">
                        <el-date-picker
                            v-model="editForm.birthday"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="性别">
                        <el-input v-model="editForm.sex" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="认证类型">
                        <el-select v-model="editForm.authType" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="信用代码/注册号">
                        <el-input v-model="editForm.creditCode" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="企业">
                        <el-input v-model="editForm.enterprise" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="身份证">
                        <el-input v-model="editForm.idNo" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="身份">
                        <el-input v-model="editForm.identity" style="width: 300px;"></el-input>
                    </el-form-item>

                     <el-form-item label="经营地">
                        <el-input v-model="editForm.managePlace" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="经营者/法人代表">
                        <el-input v-model="editForm.managerName" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="个人签名">
                        <el-input v-model="editForm.personSignature" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="出生地">
                        <el-input v-model="editForm.birthPlace" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱">
                        <el-input v-model="editForm.email" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item
                        label="营业执照照片"
                        >
                        <img class="avatar" style="max-width: 300px;" v-if="editForm.businessLicense" :src="baseUrl+'/rest/common/preview/' + editForm.businessLicense">
      					<el-upload
      						with-credentials
						  	:action="uploadUrl"
						  	accept="image/*"
						  	:headers="uploadHeaders"
						  	:on-success="handleAvatarSuccess"
                            :show-file-list="false"
						>
						  	<el-button size="small" type="primary" id="uploadAvatar" ref="uploadAvatar">{{editForm.businessLicense ? '更换照片' : '点击上传'}}</el-button> 
                            
						</el-upload>
                        <el-button v-if="editForm.businessLicense" @click="editForm.businessLicense=''" size="small" type="danger">删除</el-button>
                    </el-form-item>

                    <el-form-item
                        label="企业授权书照片"
                        >
                        <img class="avatar" style="max-width: 300px;" v-if="editForm.enterpriseAuthLetterImage" :src="baseUrl+'/rest/common/preview/' + editForm.enterpriseAuthLetterImage">
      					<el-upload
      						with-credentials
						  	:action="uploadUrl"
						  	accept="image/*"
						  	:headers="uploadHeaders"
						  	:on-success="handleAvatarSuccess1"
                            :show-file-list="false"
						>
						  	<el-button size="small" type="primary" id="uploadAvatar" ref="uploadAvatar">{{editForm.enterpriseAuthLetterImage ? '更换照片' : '点击上传'}}</el-button> 
                            
						</el-upload>
                        <el-button v-if="editForm.enterpriseAuthLetterImage" @click="editForm.enterpriseAuthLetterImage=''" size="small" type="danger">删除</el-button>
                    </el-form-item>

                    <el-form-item
                        label="手持身份证照片"
                        >
                        <img class="avatar" style="max-width: 300px;" v-if="editForm.holdIdImage" :src="baseUrl+'/rest/common/preview/' + editForm.holdIdImage">
      					<el-upload
      						with-credentials
						  	:action="uploadUrl"
						  	accept="image/*"
						  	:headers="uploadHeaders"
						  	:on-success="handleAvatarSuccess2"
                            :show-file-list="false"
						>
						  	<el-button size="small" type="primary" id="uploadAvatar" ref="uploadAvatar">{{editForm.holdIdImage ? '更换照片' : '点击上传'}}</el-button> 
                            
						</el-upload>
                        <el-button v-if="editForm.holdIdImage" @click="editForm.holdIdImage=''" size="small" type="danger">删除</el-button>
                    </el-form-item>

                    <el-form-item
                        label="身份证正面照片"
                        >
                        <img class="avatar" style="max-width: 300px;" v-if="editForm.idImage1" :src="baseUrl+'/rest/common/preview/' + editForm.idImage1">
      					<el-upload
      						with-credentials
						  	:action="uploadUrl"
						  	accept="image/*"
						  	:headers="uploadHeaders"
						  	:on-success="handleAvatarSuccess3"
                            :show-file-list="false"
						>
						  	<el-button size="small" type="primary" id="uploadAvatar" ref="uploadAvatar">{{editForm.idImage1 ? '更换照片' : '点击上传'}}</el-button> 
                            
						</el-upload>
                        <el-button v-if="editForm.idImage1" @click="editForm.idImage1=''" size="small" type="danger">删除</el-button>
                    </el-form-item>

                    <el-form-item
                        label="身份证反面照片"
                        >
                        <img class="avatar" style="max-width: 300px;" v-if="editForm.idImage2" :src="baseUrl+'/rest/common/preview/' + editForm.idImage2">
      					<el-upload
      						with-credentials
						  	:action="uploadUrl"
						  	accept="image/*"
						  	:headers="uploadHeaders"
						  	:on-success="handleAvatarSuccess4"
                            :show-file-list="false"
						>
						  	<el-button size="small" type="primary" id="uploadAvatar" ref="uploadAvatar">{{editForm.idImage2 ? '更换照片' : '点击上传'}}</el-button> 
                            
						</el-upload>
                        <el-button v-if="editForm.idImage2" @click="editForm.idImage2=''" size="small" type="danger">删除</el-button>
                    </el-form-item>
                    

                    <el-form-item label="创建时间">
                        <el-input disabled v-model="editForm.createTime" style="width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item label="更新时间">
                        <el-input disabled v-model="editForm.updateTime" style="width: 300px;"></el-input>
                    </el-form-item>

				</el-form>
                <span v-html="style"></span>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">确定</el-button>
			    <el-button size="mini" type="danger" @click="resetDialog">取消</el-button>
			</div>	
		</el-dialog>

	</div>
</template>


<script>
import { baseUrl } from '@/config/env';

//上传照片
const uploadUrl = baseUrl+'/rest/common/upload';

import { alterAvatar, alterPass, getInfo, editInfo, previewAvatar } from "@/api/user"

import { getToken } from '@/utils/auth'
export default{
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:{}
		}
	},
	watch:{
	    visible(val){
	    	this.DialogVisible = val;
        },
        form (val) {
            this.editForm = JSON.parse(JSON.stringify(val))
        }
	},
	data(){
		return{
            style: `
                <style>
                    .el-dialog {
                        overflow: overlay !important;
                    }
                </style>
            `,
            uploadHeaders:{'Authorization':'Bearer ' + getToken()},
            uploadUrl:uploadUrl,
            baseUrl:baseUrl,
			DialogVisible:false,
			editForm:{},
			formLabelWidth:'100px',
			//验证规则
		    rules:{
		        name:[{required:true,message:"请输入名称",trigger:"blur"}],
		        description:[{required:true,message:"请输入别名",trigger:"blur"}],
		        sort:[{required:true,message:"请输入排序",trigger:"blur"}],  
            },
            options: [
                {
                    value: 1,
                    label: '个人',
                },
                {
                    value: 2,
                    label: '企业',
                },
                {
                    value: 3,
                    label: '个人户',
                },
            ]
		}
	},
	mounted(){
		
	},
	methods:{
        //上传照片成功 -- 营业执照照片
		handleAvatarSuccess(res,file,attr){
			console.log("---上传照片成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改照片成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.editForm.businessLicense = fileId;
				}
			})
        },
        //上传照片成功 -- 企业授权书照片
		handleAvatarSuccess1(res,file,attr){
			console.log("---上传照片成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改照片成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.editForm.enterpriseAuthLetterImage = fileId;
				}
			})
        },
        //上传照片成功 -- 手持身份证照片
		handleAvatarSuccess2(res,file,attr){
			console.log("---上传照片成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改照片成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.editForm.holdIdImage = fileId;
				}
			})
        },
        //上传照片成功 -- 身份证正面照片
		handleAvatarSuccess3(res,file,attr){
			console.log("---上传照片成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改照片成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.editForm.idImage1 = fileId;
				}
			})
        },
        //上传照片成功 -- 身份证反面照片
		handleAvatarSuccess4(res,file,attr){
			console.log("---上传照片成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改照片成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.editForm.idImage2 = fileId;
				}
			})
		},
		resetDialog(){
			this.DialogVisible = false;
			this.$emit('cancel')
		},
		confirm(){
			this.$refs.dialogForm.validate((valid)=>{
		        if (valid) {
		          this.DialogVisible = false;

		          if(this.editForm.pid === 0){
		          	this.editForm.pid = '0';
		          }

		          this.$emit('confirm',{data:this.editForm});

		        } else {
		           
		            return false;
		        }

      		})
		}

	}
}


</script>

<style scoped>
	.with-full{
	    width:100%!important;
	}
    .el-dialog {
        max-height: 460px !important;
        overflow: overlay !important;
    }
    .dialog-footer {
        text-align: center;
    }
</style>